<template>
	<div class="login">
		<div class="inputlogin">
			<div class="rightbox">
				<div class="rightboxcontent">
					<h3><img src="../../assets/image/school/login/logintitle.png" alt="" style="width:96px;"></h3>
					<!-- 账号密码登录 -->
					<!-- <ul class="dltable">
						<li :class="tabactive==1?'hover':''" @click="tabszh(1)">账号密码登录</li>
						<li :class="tabactive==2?'hover':''" @click="tabszh(2)">手机号登录</li>
					</ul> -->
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm" :show-message="false">
						    <el-form-item prop="username">
								<div class="yanzmToget">
									<span>账号</span>
									<el-input clearable v-model="ruleForm.account" placeholder="账号"></el-input>
								</div>
							</el-form-item>
						    <el-form-item prop="password" style="margin-bottom:0;">
								<div class="yanzmToget1">
									<span>密码</span>
									<el-input clearable v-model="ruleForm.password" show-password placeholder="密码" @keyup.enter.native="keyDown"></el-input>
								</div>
							</el-form-item>
						</el-form>
						<!-- <div class="opts">
						    <div class="forget" style="float:right;"><el-button type="text" @click="$router.push('/forgetpw')">忘记密码</el-button></div>
						</div> -->
						<div class="attentionStyle" v-if="attentionIshow" style="padding-top:10px;"><i><img src="../../assets/image/school/login/attention.png" style="width:14px;" alt=""></i>{{attentionInfo}}</div>
						<el-button class="buttonlogin1" type="primary" @click="submitForm" v-if="isFormValid" :style="{ marginTop: attentionIshow ? '30px' : '40px' }">点击登录</el-button>
						<el-button class="buttonlogin" type="primary" v-else :style="{ marginTop: attentionIshow ? '30px' : '40px' }">点击登录</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {encrypt,decrypt} from '../../utils/cryptojs'
	// import {Getscmcode,teacherLogin,Getloginteacher} from '../../request/api.js'
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			var validatePhone = (rule,value,callback)=>{
				if(value == ''){
					callback(new Error('请输入手机号'))
				}else{
					if(value !==''){
						var reg = /^1[13456789]\d{9}$/;
						if(!reg.test(value)){
							callback(new Error('手机号输入错误'))
						}else{
							//手机号码输入正确时才可点击获取验证码按钮
							this.codeDisabled = false;
						}
					}
					callback();
				}	
			}
			var validatePhone1 = (rule,value,callback)=>{
				if(value == ''){
					callback(new Error('请输入手机号'))
				}else{
					if(value !==''){
						var reg = /^1[13456789]\d{9}$/;
						if(!reg.test(value)){
							callback(new Error('手机号输入错误'))
						}
					}
					callback();
				}
					
			}
			return{
				checked: false,
				input1:'',
				input2:'',
				timer:null,
				errorTxt:'',
				countdown:60,
				codeMeg:'发送验证码',
				codeDisabled:false,
				registerdeFormData:{
					telephone:'',
					smscode:''
				},
				regrules:{
					telephone:[
						{validator:validatePhone,trigger:"change"}
					],
					smscode:[{required: true, message: '请输入验证码', trigger: 'change'}]
				},
				attentionInfo:'',
				attentionIshow:false,
				ruleForm: {
				    account: '',
				    password: ''
				},
				rules: {
				    // userNumber: [{  validator: validatePhone1, trigger: 'change' }],
					account: [{  required: true,trigger: 'change' }],	
				    password: [{ required: true,trigger: 'change' }]
				},
				tabactive:1,
				yztgishow:false
			}
		},
		mounted() {
			// 绑定监听事件
			window.addEventListener("keydown", this.keyDown);
			// var num = 1000.1
			// let str = num.toString();
			// let reg = /^[0-9]+(.[0-9]{1})?$/
			// if(str.indexOf(".")>-1){
			// 	if(reg.test(str)){
			// 		let reg1 = /^\d+\.5$/
			// 		if(!reg1.test(str)){
			// 			//console.info('3333')
			// 		}
			// 	}
			// }
		},
		methods:{
			// 账号密码登录
			submitForm() {
			    // const self = this;
			    this.$refs.ruleForm.validate(valid => {
			      if (valid) {
					//   let userinfo = '123456'
					//    const encryptData = encrypt(JSON.stringify(userinfo))
					   //存储加密的
					   // localStorage.setItem('accessToken', encryptData);
					   //  this.$router.push('/examindex')
					  post('/auth/login', this.ruleForm)
					    .then(res => {
						  if(res.code==200){
							  // 加密数据
								const encryptData = encrypt(JSON.stringify(res.data))
								//存储加密的
								localStorage.setItem('accessToken', encryptData);
								localStorage.setItem('token',res.data.token)
							    this.$router.push('/homework')
						  }else{
							  this.attentionInfo = res.message
							  this.attentionIshow = true
						  }
						  
					    })
					    .catch(error => {
					      // 处理错误
					    });
			      }
			  })
			},
			keyDown(e){
				if (e.keyCode == 13 || e.keyCode == 108) {
					this.submitForm()
				}
			},
		},
		destroyed() {
			// 销毁事件
			window.removeEventListener("keydown", this.keyDown, false);
		},
		computed: {
			isFormValid() {
				return this.ruleForm.account.trim() && this.ruleForm.password.trim();
			}
		}
	}
</script>

<style scoped>
	.login{
		width:100vw;
		height:100vh;
		background:url(../../assets/image/school/login/loginbj.png) no-repeat center center;
		background-size:cover;
	}
	.inputlogin{
		box-sizing: border-box;
		width: 65%;
		/* background: #FFFFFF; */
		/* box-shadow: 0px 13px 35px 0px rgba(60,105,177,0.59); */
		border-radius: 58px;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		/* padding:60px 70px 0; */
		text-align: left;
		display: flex;
	}
	.rightbox{
		width:1200px;
		margin:0 auto;
		display: flex;
		justify-content: right;
	}
	.rightboxcontent{
		box-sizing: border-box;
		width: 424px;
		height: 452px;
		background:#fff;
		border-radius:25px;
		padding: 44px 40px 10px 40px;
		background:url(../../assets/image/school/login/loginkbj.png) no-repeat center center;
		background-size:cover;
	}
	.inputlogin h3{
		margin-bottom:30px;
		text-align: center;
		font-weight: 600;
		text-align: left;
		color: #2379f6;
		font-size: 23px;
		font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
	}
	.inputlogin h3 span{
		font-weight: normal;
		display: block;
	}
	.inputlist{
		display: flex;
		padding-top:30px;
	}
	.wordinput{
		width:90px;
		line-height:40px;
		text-align: right;
	}
	.buttonlogin{
		width:100%;
		height: 48px;
		border-radius: 100px;
		background:url(../../assets/image/school/login/loginbutton.png) no-repeat center center;
		background-size:cover;
		color: rgba(255, 255, 255, 100);
		border:none;
		margin:15px 0 20px;
		font-size:18px;
		color:#B3B8C2;
		font-weight:bold;
	}
	.buttonlogin1{
		width:100%;
		height: 48px;
		border-radius: 100px;
		background:url(../../assets/image/school/login/loginbutton1.png) no-repeat center center;
		background-size:cover;
		color: rgba(255, 255, 255, 100);
		border:none;
		margin:15px 0 20px;
		font-size:18px;
		color:#fff;
		font-weight:bold;
		padding:10px 20px;
	}
	.buttonlogin1 span{
		position:relative;
		top:-3px;
	}
	.yanzmToget span{
		display: block;
		font-family: PingFangSC-Medium;
		font-size: 18px;
		color: #333333;
	}
	.yanzmToget >>> .el-input__inner{
		height: 42px;
		border: 1px solid #DEE1E7;
		border-radius: 10px;
		font-size:14px;
		background:url(../../assets/image/school/login/user.png) no-repeat 14px center;
		background-size:14px 14px;
		padding-left:34px;
		font-weight: bold;
	}
	.yanzmToget1 span{
		display: block;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 18px;
		color: #333333;
	}
	.yanzmToget1 >>> .el-input__inner{
		height: 42px;
		border: 1px solid #DEE1E7;
		border-radius: 10px;
		font-size:14px;
		background:url(../../assets/image/school/login/password.png) no-repeat 14px center;
		background-size:14px 14px;
		padding-left:34px;
		font-weight: bold;
	}
	.rightboxcontent >>> .el-form-item{
		margin-bottom:18px;
	}
	.yzm{
		position:absolute;
		right:0;
		top:0;
		padding:0;
		line-height:38px;
	}
	.yanzmToget >>> .el-button.is-disabled.el-button--text{
		background-color: #2379F6;
		color:#fff;
		width:108px;
		border-radius:100px;
	}
	.yanzmToget >>> .el-button--text{
		background-color:#2379F6;
		color:#fff;
		width:108px;
		border-radius:100px;
	}
	/* .yzm:before{
		content: '';
		width:1px;
		height:18px;
		background:#ccc;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	} */
	.inputlogin >>> .el-form-item__error{
		padding-left:0px;
	}
	.attentionStyle{
		font-size:14px;
		color:#EC555A;
		display: flex;
		align-items: center;
		/* padding-left:70px; */
	}
	.attentionStyle i{
		display: inline-block;
		padding-right:5px;
		position:relative;
		top:2px;
	}
	.dltable{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom:25px;
	}
	.dltable li{
		padding:0 28px 35px;
		cursor: pointer;
		font-size:18px;
	}
	.dltable li.hover,.dltable li:hover{
		color:#619CF5;
	}
	.forget >>> .el-button{
		padding:0;
	}
	.yanzmToget >>> .el-input__inner:focus {
		border:solid 1px #295CFF !important;
		box-shadow: 0 0 0 0px rgba(64,158,255,.2) !important;
	}
	.yanzmToget1 >>> .el-input__inner:focus {
		border:solid 1px #295CFF !important;
		box-shadow: 0 0 0 0px rgba(64,158,255,.2) !important;
	}
	
</style>
<style>
	.el-button--primary{
		background-color: none;
	}
</style>
